Feat: 마이리스트, 콜라보리스트 페이지 구현 #10

ParkSohyunee · 2024-02-01T15:51:53Z

개요

마이리스트 페이지, 콜라보리스트 페이지 구현

작업 사항

사용자 프로필, 리스트, 아이템, 카테고리 mock data 생성하여 작업
페이지 UI 구현
플로팅 버튼 공통 component 제작
api 연결을 위한 React-Query 기본 설정 및 Axios Instance 생성

참고 사항 (optional)

vanilla-extract 동적 스타일링을 위해 @vanilla-extract/dynamic 라이브러리 설치
리스트 목록 디자인을 구현하기 위해 @egjs/react-grid 라이브러리 선택
- Masonry-grid Design을 제공하는 라이브러리
- React-Masonry-Component 라이브러리와 고민했지만, 해당 라이브러리도 기능면에서 더 많은 옵션을 제공하여 선택
- 추후 무한스크롤, 반응형 구현 시 이슈가 생긴다면 변경될 가능성 있음
세부적인 디자인은 추후 UX 논의 후 수정될 가능성 있음

스크린샷

리뷰어에게

시간 나실 때 천천히 확인 부탁드립니다. 오늘도 파이팅!! 🔥
코드 리뷰, 피드백 언제나 환영입니다. ❤️‍🔥

Nahyun-Kang

오매낫 husky 때문에 충돌이..🥲
소현님 항상 느끼는 것 같지만 코드 진짜 깔끔하게 잘 쓰시는 것 같습니당!! 👍
LGTM!

Nahyun-Kang · 2024-02-02T04:27:49Z

src/components/floatingButton/ArrowUpFloatingButton.tsx

@@ -0,0 +1,56 @@
+'use client';
+


머지되면 바로 floating 버튼 줍줍 예정입니다 ><

Nahyun-Kang · 2024-02-02T04:29:43Z

src/components/floatingButton/ArrowUpFloatingButton.tsx

+  return (
+    <div
+      className={styles.arrowUpButton}
+      onClick={handleScrollToTop}


assignInlinVars를 요렇게 쓰는 것이었군요..🫢 배워갑니당!!

seoyoung-min

진짜 소현님... 이번 코드리뷰 시간 저의 학습시간이었습니다!
진짜 코드 너무 깔끔해서 쫙쫙 읽히고,
꼼꼼하고 간결한 코드가 너무 좋습니다🥹👍

seoyoung-min · 2024-02-02T02:34:44Z

src/app/[userNickname]/_components/Profile.tsx

+      style={assignInlineVars({
+        [styles.imageUrl]: `url(${user.backgroundImageUrl})`,
+      })}


dynamic 스타일링 이렇게 하는 거군요...!
덕분에 훨씬 쉽게 이해할 수 있었어요! 감사합니다🙇‍♀️

와 저도 감사합니다!!

제가 바닐라익스트랙 다이나믹을 아직 잘 모르지만,
소현님께서 다른 곳 다이나믹 스타일링 적용하실때에는

className={`${styles.button} ${kind.korNameValue === selected ? styles.variant : ''}`}

이런식으로 적용해주셨던 것 같아서,
여기서는 assignInlineVars을 사용해야하셨던 이유가 있으신지 궁금해요!

넵 유진님~! assignInlineVars를 적용한 부분은 리스폰스로 데이터를 받아서 스타일 값으로 적용해야 할 때 사용하였습니다. (배경 백그라운드 및 리스트 배경 컬러) 반면에 기존 스타일에서 조건에 따른 스타일을 추가로 적용해야 할때는 className에 변화를 주는 방법을 사용했습니다~! (+. 이 부분도 바닐라익스트랙에 Sprinkles를 이용하고 싶었는데 어려웠습니다🥹)

seoyoung-min · 2024-02-02T02:40:43Z

src/app/[userNickname]/_components/Profile.tsx

+      </div>
+      <div className={styles.profileContainer}>
+        <div className={styles.profile}>
+          <img src={user.profileImageUrl} className={styles.avatar} alt="아바타" />


태그 대신 태그 쓰신 이유가 있을까요??

저번에 소현님 덕분에 svg는 최적화가 어려워 img 태그 쓰는 것을 배웠는데,
프로필 이미지는 svg가 아닐 것 같아서요!! 궁금합니다 👀

alt 텍스트 '아바타' 대신에 '프로필 이미지'는 어떨까요??

next/Image가 아닌 img 태그를 쓰신 이유 저도 궁금합니다!
혹시 이유가 있으셨나요?

특별한 이유는 없고, next/Image 사용을 깜빡했습니다 ㅎㅎ 확인 해 주셔서 감사합니다.🥹
해당 프로필은 next/Image 컴포넌트를 사용하는 것으로 수정하겠습니다~! (+. alt도 함께 수정)

seoyoung-min · 2024-02-02T02:45:13Z

src/app/[userNickname]/_components/Content.tsx

+        <Link href={`/${user.nickname}/mylist`} className={styles.link}>
+          <button className={`${styles.leftButton} ${type === 'my' ? styles.variant : ''}`}>마이 리스트</button>
+        </Link>
+        <Link href={`/${user.nickname}/collabolist`} className={styles.link}>
+          <button className={`${styles.rightButton} ${type === 'collabo' ? styles.variant : ''}`}>콜라보 리스트</button>
+        </Link>


옵셔널한 경우에는 이렇게 클래스명 2개 사용해서 스타일링을 할 수 있겠군요...
배워갑니다!! (제 코드 수정하러 갑니다🏃‍♀️)

seoyoung-min · 2024-02-02T03:54:08Z

src/components/floatingButton/ArrowUpFloatingButton.tsx

+  useEffect(() => {
+    window.addEventListener('scroll', visibleButton);
+
+    return () => {
+      window.removeEventListener('scroll', visibleButton);
+    };
+  }, []);


추후 탐색페이지에서는 스크롤 이벤트가 많이 발생하다보니,
성능 개선을 위해 쓰로틀링을 추가해도 좋을 것 같다는 생각이 듭니다!
소현님 의견은 어떠실까요??

현재 마이페이지 기준 테스트를 해보니, 12-13회 정도 발생했던 것이 4회정도로 줄어드는 것 같습니다.(쓰로틀링 0.3초로 설정시)

(제가 아는 방식은) lodash 라이브러리 설치

yarn add lodash yarn add --dev @types/lodash

적용

import throttle from 'lodash/throttle'; //... window.addEventListener('scroll', throttle(visibleButton, 300));

쓰로틀링이 이럴 때 쓰이는 거였군요! 👍👍 서영님 덕분에 배워갑니다 ㅎㅎ

@seoyoung-min
서영님 피드백 바탕으로 쓰로틀링을 커스텀 훅으로 구현해서 수정해 보았는데 시간 나실때 확인 한번 부탁드려도 될까요?! 🥹

seoyoung-min · 2024-02-02T04:29:38Z

src/components/floatingButton/ArrowUpFloatingButton.tsx

+    <div
+      className={styles.arrowUpButton}
+      onClick={handleScrollToTop}
+      style={assignInlineVars({
+        [styles.opacitySize]: isVisible ? '1' : '0',
+        [styles.cursor]: isVisible ? 'pointer' : 'default',
+      })}
+    >
+      <ArrowUpIcon alt="상단으로 이동하기 버튼" className={styles.icon} />
+    </div>


아침 데일리스크럼 때 제안드린 부분 구현 방식을 고민해봤습니다!

Suggested change

<div

className={styles.arrowUpButton}

onClick={handleScrollToTop}

style={assignInlineVars({

[styles.opacitySize]: isVisible ? '1' : '0',

[styles.cursor]: isVisible ? 'pointer' : 'default',

})}

>

<ArrowUpIcon alt="상단으로 이동하기 버튼" className={styles.icon} />

</div>

//아예 없애고 노출시키는 방향

<>

{isVisible && (

<div className={styles.arrowUpButton} onClick={handleScrollToTop}>

<ArrowUpIcon alt="상단으로 이동하기 버튼" className={styles.icon} />

</div>

)}

</>

//CSS는 transition 대신 애니메이션으로 const fadeIn = keyframes({ '0%': { opacity: 0 }, '100%': { opacity: 1 }, }); export const arrowUpButton = style([ addButton, { animation: `${fadeIn} 300ms ease`, }, ]);

ParkSohyunee · 2024-02-02T05:15:12Z

오매낫 husky 때문에 충돌이..🥲 소현님 항상 느끼는 것 같지만 코드 진짜 깔끔하게 잘 쓰시는 것 같습니당!! 👍 LGTM!

@Nahyun-Kang
나현님, 시간 내서 피드백 해주셔서 감사드립니다. 😊

ParkSohyunee · 2024-02-02T05:20:29Z

진짜 소현님... 이번 코드리뷰 시간 저의 학습시간이었습니다! 진짜 코드 너무 깔끔해서 쫙쫙 읽히고, 꼼꼼하고 간결한 코드가 너무 좋습니다🥹👍

@seoyoung-min
서영님 시간 내서 꼼꼼하게 피드백 해주셔서 감사드립니다. 코드까지 첨부해주셔서 넘 감동이네요..😍🥹
리뷰 주신 내용 확인해서 오늘~내일 중으로 수정 반영 해놓겠습니다. 의견 감사합니당👍

kanglocal

넘 고생많으셨습니다 감사합니다!! 👍

kanglocal · 2024-02-02T01:21:40Z

next.config.js

와앙 웹팩 설정 해보다가 안되서 포기했는데 좋은 예시 주셔서 감사합니다! 👍

Eugene-A-01 · 2024-02-02T11:08:10Z

src/app/[userNickname]/_components/Profile.tsx

+      style={assignInlineVars({
+        [styles.imageUrl]: `url(${user.backgroundImageUrl})`,
+      })}


제가 바닐라익스트랙 다이나믹을 아직 잘 모르지만,
소현님께서 다른 곳 다이나믹 스타일링 적용하실때에는

className={`${styles.button} ${kind.korNameValue === selected ? styles.variant : ''}`}

이런식으로 적용해주셨던 것 같아서,
여기서는 assignInlineVars을 사용해야하셨던 이유가 있으신지 궁금해요!

seoyoung-min · 2024-02-02T15:53:56Z

소현님 수정해주신 부분도 확인했습니다!! 직접 쓰로틀 커스텀 훅 구현까지...👍
Image 컴포넌트 host 설정해주는 것도 처음 알았습니다!! 감사합니다🙇‍♀️👍

…ave-front into feature/feed

ParkSohyunee added 21 commits January 26, 2024 22:36

Feat: 사용자 피드 페이지 mock 데이터 연결해서 프로필 완성

19685c9

Chore: 프리티어 추가

057e58b

Feat: 카테고리, 리스트 mock data 추가

81ba815

Feat: 리스트 mock data 연결

f029bf9

Feat: 아이템 목록 mock data 연결

3b872fc

Feat: 피드페이지 프로필 컴포넌트 분리, 타입 추가

9ebb860

Feat: Content 컴포넌트 분리, 마이/콜라보 타입에 따른 리스트 목록 불러오기 로직 추가

2197edd

Feat: 피드 페이지 - 카테고리 타입에 따른 리스트 목록 불러오기 로직 추가

ad1a720

Design: 글로벌css 설정, 피드페이지 - 프로필 컴포넌트 UI 구현

087611d

Design: 피드페이지 - 리스트 타입, 카테고리 UI 구현

471aaf6

Design: 피드페이지 - 리스트 UI 구현(Masonry 레이아웃 적용)

2afba44

Design: 피드페이지 전체 스타일 점검, 리스트 배경색 dynamic 스타일 적용

1b951ba

Design: 리스트, 카테고리 selected 상태일때 스타일 적용

011ff9e

Feat: 마이리스트, 콜라보리스트 페이지로 각각 분리

7a413d9

Style: styles prefix 수정, 주석 정리

7286239

Design: 피드페이지 - 플로팅버튼, 헤더 UI 구현, 배경이미지 불러와서 UI 구현, 스타일 일부 수정

375754d

Feat: 리액트쿼리, axios 기본 설정

9727f9f

Feat: 카테고리 조회 api 추가

f70403a

Feat: svg 컴포넌트화 설정 및 기존 img 태그 컴포넌트로 변경

aa420f3

Design: 리스트 비공개 디자인 수정

d6a5b3f

Feat: 플로팅버튼 공통 컴포넌트로 분리, 스크롤 top 기능 구현

4dfa9f6

ParkSohyunee added Feat 구현 Design UI 수정 labels Feb 1, 2024

ParkSohyunee requested review from Eugene-A-01, kanglocal, Nahyun-Kang and seoyoung-min February 1, 2024 15:51

ParkSohyunee self-assigned this Feb 1, 2024

Nahyun-Kang approved these changes Feb 2, 2024

View reviewed changes

Nahyun-Kang reviewed Feb 2, 2024

View reviewed changes

seoyoung-min approved these changes Feb 2, 2024

View reviewed changes

kanglocal approved these changes Feb 2, 2024

View reviewed changes

next.config.js Outdated

Copy link

Contributor

kanglocal Feb 2, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

와앙 웹팩 설정 해보다가 안되서 포기했는데 좋은 예시 주셔서 감사합니다! 👍

Eugene-A-01 approved these changes Feb 2, 2024

View reviewed changes

ParkSohyunee added 6 commits February 2, 2024 21:29

Chore: next/Image 컴포넌트 사용을 위한 hostname 설정

2705cc6

Design: 프로필 컴포넌트 이미지 next/Image 컴포넌트로 수정

e262398

Chore: 서버 도메인 URL 환경변수로 설정

6c8285c

Feat: ArrowUp 컴포넌트 스크롤이벤트 쓰로틀링 커스텀 훅 구현

751a177

Design: ArrowUp 버튼 스타일 효과 수정

30aea13

Style: props 이름 수정

e804394

ParkSohyunee and others added 6 commits February 3, 2024 10:40

Merge branch 'dev' into feature/feed

6890ebb

Merge branch 'dev' into feature/feed

85c2b6e

Chore: axios 설정

a55bda1

Merge branch 'feature/feed' of https://github.com/ParkSohyunee/ListyW…

8ddf9b0

…ave-front into feature/feed

Style: 콜라보리스트 페이지 props 주석 처리

f90f2f2

Style: 마이리스트 페이지 사용하지 않는 props 주석 처리

11f8bcb

ParkSohyunee merged commit 6a517f1 into 8-Sprinters:dev Feb 3, 2024
1 check passed

ParkSohyunee deleted the feature/feed branch August 3, 2024 02:21

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat: 마이리스트, 콜라보리스트 페이지 구현 #10

Feat: 마이리스트, 콜라보리스트 페이지 구현 #10

ParkSohyunee commented Feb 1, 2024

Nahyun-Kang left a comment

Nahyun-Kang Feb 2, 2024

Nahyun-Kang Feb 2, 2024

seoyoung-min left a comment

seoyoung-min Feb 2, 2024

kanglocal Feb 2, 2024

Eugene-A-01 Feb 2, 2024

ParkSohyunee Feb 2, 2024

seoyoung-min Feb 2, 2024

Eugene-A-01 Feb 2, 2024

ParkSohyunee Feb 2, 2024

seoyoung-min Feb 2, 2024

seoyoung-min Feb 2, 2024

Nahyun-Kang Feb 2, 2024

ParkSohyunee Feb 2, 2024

seoyoung-min Feb 2, 2024

ParkSohyunee commented Feb 2, 2024

ParkSohyunee commented Feb 2, 2024

kanglocal left a comment

kanglocal Feb 2, 2024

Eugene-A-01 Feb 2, 2024

seoyoung-min commented Feb 2, 2024

Feat: 마이리스트, 콜라보리스트 페이지 구현 #10

Feat: 마이리스트, 콜라보리스트 페이지 구현 #10

Conversation

ParkSohyunee commented Feb 1, 2024

개요

작업 사항

참고 사항 (optional)

스크린샷

리뷰어에게

Nahyun-Kang left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

seoyoung-min left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ParkSohyunee commented Feb 2, 2024

ParkSohyunee commented Feb 2, 2024

kanglocal left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

seoyoung-min commented Feb 2, 2024